<template>
  <div>
    <div style="font-size:20px;font-weight:bold;color:blue;text-decoration: underline;font-style: italic;margin-bottom: 20px ">
      欢迎
    </div>
    <div style="font-size: 30px">
      <!-- 显示a和b的数据 -->
      {{a}}
      {{b}}
      {{data.a}}
      {{data.b}}
      {{data.c}}
      {{data.d}}
      <div>
        <!-- 输入框：表单绑定数据，双向绑定data.a  a会跟着变化-->
        <input v-model="data.a" />
      </div>
      <div style="margin-bottom: 20px">
        <!-- 使用"",需要''才可以识别-->
        <span style="color: blue" v-if="data.name ==='奇迹'">奇迹再现</span>
        <span style="color: red" v-if="data.name ==='孤勇'">孤勇者</span>
        <span style="color: magenta" v-else>泡沫</span>

      </div>
      <div style="display: flex;flex-wrap: wrap; width: 100%; justify-content: space-between">
        <!-- v-for指令用来遍历data.arr数组，生成多个格子,@click在任何地方都可以添加点击事件 -->
        <div @click="show(item)" style="width: 33%;
        height: 300px;
        text-align:center;
        line-height:300px;
        font-size:30px;
        margin-bottom:10px;
        background-color: aquamarine" v-for="item in data.arr" >{{item}}
        </div>
      </div>
    </div>
    <div>
      <select style="width: 200px">
        <!-- 使用v-for遍历-->
        <option v-for="item in xh.a1">{{item}}</option>
      </select>
    </div>
    <div>
      <!--      v-on:(缩写@) 是Vue.js的事件绑定指令
                click 是按钮的点击事件         -->
      <button v-on:click="click">点击加好运</button>
    </div>
    <div style="margin-bottom: 30px">
      <div :style="data.box"></div>
      <div>
        <!--        动态样式和动态图片绑定-->
        <img :src="data.img" alt="">
      </div>
    </div>
    <div style="margin: 30px">
      <el-button @click="clickData" style="color: aqua" >Default</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" >Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <div style="margin: 30px">
      <el-icon :size="size" :color="color">
        <Edit />
      </el-icon>
      <span style="margin-left:30px ">
        <el-icon :size="20"><View /></el-icon> 200
        <el-button type="danger" :icon="Delete" circle />
       <el-input v-model="input" style="width: 240px" placeholder="Please input" />
      </span>
    </div>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {Delete, View} from "@element-plus/icons-vue";
//导包
const  a = ref(1) //定义一个数据
const  b = ref("第一个项目")
// 推荐reactive多个定义数据
const  data =reactive(
    {
      a:12,
      b:"加油，我可以的",
      c:"123123",
      d:false,
      name: '',
      arr: [1,2,3,4,5,6,7,8,9],
      img:'https://www.runoob.com/wp-content/uploads/2017/01/vue.png',
      box:{
        width:'100px',
        height:'100px',
        backgroundColor:'red',
      }
    }
)
const  click=()=>{
  alert("好运+1")
}
const  xh = reactive({
  a1:['丑八怪','lover','red'],
})
const  show =(value)=>{
  alert(value)
}
onMounted(() =>{
  alert("页面加载完成")
  console.log("页面加载完成")
})
const clickData = ()=>{
  alert("当前使用的是Element-plus的点击事件")
}
const input = ref('')
</script>


